<template>
  <div class="timeline-horizontal">
    <div class="timeline-scroll">
      <div class="timeline-items">
        <!-- 横向时间轴线，随内容变宽 -->
        <div class="timeline-line"></div>

        <!-- 每一个卡片 -->
        <div
          v-for="(policy, index) in sortedPolicies"
          :key="policy.id"
          class="timeline-item"
          :class="{ top: index % 2 === 0, bottom: index % 2 !== 0 }"
          @click="handleEdit(policy)"
          :title="policy.title"
        >
          <!-- 连接线：从主线连接到卡片 -->
          <div class="connector" :class="{ top: index % 2 === 0, bottom: index % 2 !== 0 }"></div>

          <!-- 圆点 -->
          <div class="timeline-dot"></div>

          <!-- 卡片 -->
          <div class="policy-card">
            <div class="policy-header">
              <h3 class="policy-title">{{ policy.title }}</h3>
              <span class="policy-date">{{ formatDate(policy.date) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  policies: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['edit'])

const sortedPolicies = computed(() => {
  return [...props.policies].sort((a, b) => new Date(a.date) - new Date(b.date))
})

function formatDate(dateStr) {
  const d = new Date(dateStr)
  if (isNaN(d)) return ''
  return d.toLocaleDateString()
}

function handleEdit(policy) {
  emit('edit', policy)
}
</script>

<style scoped>
.timeline-horizontal {
  position: relative;
  padding: 120px 20px; /* 上下都多留空间 */
  background: var(--color-primary);
  color: var(--color-textPrimary);
  border-radius: 8px;
  box-shadow: 0 0 8px var(--color-shadow);
  overflow-x: auto;
  overflow-y: visible;
  min-height: 300px; /* 容器最小高度 */
  box-sizing: border-box;
}

.timeline-scroll {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 20px;
  height: 360px; /* 给内容足够高度展示上下交错 */
}

.timeline-items {
  position: relative;
  display: flex;
  gap: 0px;
  min-width: max-content;
  padding: 0 20px;
  box-sizing: content-box;
  height: 260px; /* 和滚动容器一致 */
  align-items: center; /* 垂直居中，方便定位 */
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  z-index: 1;
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  max-width: 300px;
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
}

.timeline-item.top {
  transform: none;
}
.timeline-item.bottom {
  transform: none;
}

.timeline-item.top .policy-card {
  transform: translateY(-80px);
}

.timeline-item.bottom .policy-card {
  transform: translateY(80px);
}


.connector {
  width: 2px;
  background: var(--color-accent);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.connector.top {
  bottom: 50%;
  height: 80px; /* 改成和 translateY(-80px) 一致 */
}

.connector.bottom {
  top: 50%;
  height: 80px;
}


.timeline-dot {
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-glow);

  position: absolute;  /* 由相对改为绝对定位 */
  top: 50%;           /* 垂直居中时间轴 */
  left: 50%;          /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中点 */
  z-index: 3;
}


.policy-card {
  background: #f4f6fa; /* 淡灰蓝，适配黑白背景 */
  color: #1f2937; /* 深灰蓝文字 */
  padding: 12px 16px;
  border-radius: 12px;
  min-width: 120px;
  width: auto;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
  border: 1px solid #d1d5db; /* 浅边框 */
  transition: all 0.3s ease;
  margin-top: 12px;
}

.policy-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.policy-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(100, 116, 139, 0.3); /* 淡蓝灰光晕 */
}

.policy-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap; /* 保持单行显示 */
  overflow: visible; /* 允许内容溢出 */
  text-overflow: clip; /* 不显示省略号 */
  max-width: none; /* 移除最大宽度限制 */
}

.policy-date {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap; /* 保持单行显示 */
}



</style>